본문으로 건너뛰기

Props로 컴포넌트 데이터 전달

React에서 Props는 컴포넌트 간에 데이터를 전달하는 데 사용되는 중요한 개념입니다. 컴포넌트가 재사용 가능하고 독립적인 블록으로 구성되기 위해서는 데이터와 그에 따른 동작을 부모 컴포넌트로부터 전달받아야 합니다. 이 과정에서 Props가 핵심 역할을 합니다.

Props의 기본 개념​

Props는 컴포넌트에 전달되는 읽기 전용 속성입니다. 부모 컴포넌트는 자식 컴포넌트에게 Props를 전달함으로써 데이터나 함수 등을 전달할 수 있습니다. 이 때, 자식 컴포넌트는 전달받은 Props를 변경할 수 없으며, 오직 읽기만 가능합니다.

다음은 기본적인 예시입니다.

// 부모 컴포넌트
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const data = "Hello, React!";
    
    return (
        <ChildComponent message={data} />
    );
}

export default ParentComponent;

// 자식 컴포넌트
import React from 'react';

function ChildComponent(props) {
    return (
        <div>{props.message}</div>
    );
}

export default ChildComponent;

위의 예시에서 ParentComponent는 문자열 data를 ChildComponent에 message라는 이름의 Props로 전달하고 있습니다. ChildComponent는 props.message를 사용하여 이 값을 화면에 표시합니다.

Props 사용법​

1. Props 전달하기​

Props는 HTML 속성을 작성하는 것과 유사한 방식으로 전달됩니다. 속성 이름을 지정하고 값을 할당하면 됩니다.

<ChildComponent message="Hello, World!" />

2. Props 읽기​

자식 컴포넌트는 props 객체를 통해 전달된 속성에 접근할 수 있습니다.

function ChildComponent(props) {
    return <div>{props.message}</div>;
}

또는 ES6의 구조 분해 할당 문법을 사용할 수도 있습니다.

function ChildComponent({ message }) {
    return <div>{message}</div>;
}

3. Props 기본값 설정​

컴포넌트에 전달되는 Props의 기본값을 설정할 수 있습니다. 이를 통해 Props가 전달되지 않았을 때에도 컴포넌트가 정상적으로 동작할 수 있도록 합니다.

function ChildComponent({ message }) {
    return <div>{message}</div>;
}

ChildComponent.defaultProps = {
    message: 'Default Message'
};

4. PropTypes로 타입 체크​

Props의 타입을 체크하여 코드의 안정성을 높일 수 있습니다. PropTypes를 사용하면 각 Props가 예상한 타입과 일치하는지 확인할 수 있습니다.

import PropTypes from 'prop-types';

function ChildComponent({ message }) {
    return <div>{message}</div>;
}

ChildComponent.propTypes = {
    message: PropTypes.string.isRequired
};

이 예제에서 message Props는 문자열 타입이어야 하며, 필수적으로 전달되어야 합니다.

주의사항​

  • 읽기 전용: Props는 컴포넌트에서 변경할 수 없습니다. 변경이 필요하다면 부모 컴포넌트에서 상태(State)를 관리하고, Props를 통해 변경된 값을 자식 컴포넌트에 전달해야 합니다.
  • 정확한 이름 사용: Props 이름은 의미를 정확히 전달할 수 있도록 작성해야 합니다. 예를 들어, userData보다는 userName처럼 구체적으로 명명하는 것이 좋습니다.

더 알아보기​

  • PropTypes: Props의 타입을 검사하는 방법으로 코드의 안정성을 높이는 방법.
  • defaultProps: Props의 기본값을 설정하는 방법.
  • 구조 분해 할당: ES6 문법을 사용하여 Props를 더 간편하게 사용하는 방법.

내용 요약과 다음 주제​

이 글에서는 React에서 Props를 사용하여 컴포넌트 간에 데이터를 전달하는 방법을 설명했습니다. Props는 읽기 전용 속성으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다. 다음 주제인 State로 상태 관리에서는 컴포넌트의 상태를 관리하는 방법과 그 중요성에 대해 다룰 예정입니다.